<template>
    <div class="view-container">
        <h1 class="chotype">请选择发布类型</h1>
        <div class="publishBox">
            <router-link :to="{name:'goodsPublishFast'}" class="link">
                <div>快速发布</div>
                <span>适用于主流产品</span>
                <span class="el-icon-plus"> </span>
            </router-link>

            <router-link :to="{name:'goodsPublishNormal'}" class="link">
                <div>普通发布</div>
                <span>适用于个性化，黑科技产品</span>
                <span class="el-icon-plus"> </span>
            </router-link>
        </div>

    </div>

</template>

<script>
    export default {
        name: 'goodsPublish',
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style lang="less" scoped>
    .chotype {
        text-align: center;
        font-size: 16px;
        color: #333;
        padding: 10px;
    }

    .publishBox {
        position: relative;
        text-align: center;
        .link {
            display: inline-block;
            position: relative;
            width: 256px;
            height: 256px;
            border-radius: 50px;
            text-align: center;
            font-size: 22px;
            color: #fff;
            margin: 80px 40px 10px;
            padding-top: 30px;
            background: #4EBEFF url('../../assets/icon/icon_fast.png') 110px 10px no-repeat;
            &:hover, &:active {
                color: #fff;
            }
            .el-icon-plus {
                content: "";
                position: absolute;
                top: 119px;
                left: 50%;
                width: 98px;
                height: 98px;
                border-radius: 50%;
                background: rgba(255, 255, 255, .5);
                transform: translateX(-50%);
                color: #fff;
                font-size: 60px;
                text-align: center;
                line-height: 98px;
            }
            > span:first-of-type {
                font-size: 14px;
                display: block;
                margin-top: 21px;
            }

            &:last-of-type {
                background: #FFCC6D url('../../assets/icon/icon_normal.png') 100px 10px no-repeat;
            }
        }
    }

</style>
